<template>
    <div class="tree" v-for="(item,index) in data" :key="index">
        <input v-model="item.checked" type="checkbox"> <span>{{ item.name }}</span>
        <!-- 递归遍历 需要 组件名字需要和文件名字一样 -->
        <tree v-if="item?.children?.length" :data="item?.children" />
    </div>
</template>

<script setup lang="ts">
const props =defineProps({
    data:{
        type:Object
    }
})

</script>

<style scoped>
.tree{
    margin-left: 10px;
}
</style>